<template>
	<view>
		<view v-if="!readonly" class="mb15 p10 bg_white">
			<upload ref="upload" childId="upload" :size="10" v-model="percent" @input="onInput" @callback="onCallback">
				<u-icon name="plus" size="20" class="flexbox flexCC "></u-icon>
				<view class="tc pt5">上传附件</view>
			</upload>
		</view>

		<van-cell-group v-for="(item,index) in listData" :key="index">
			<van-popover style="width: 100%;" v-model="item.show" theme="dark" trigger="click" :actions="actions"
				@open="onOpen(item)" @select="onSelect">
				<template #reference>
					<van-cell :title="item.AttachName"
						:label="item.AttachSize +' '+item.AddTimes +' '+item.UploadUserName"></van-cell>
				</template>
			</van-popover>
		</van-cell-group>

		<u-empty v-show="noShow" text="暂无附件" mode="list" style="padding-top: 15vh;" icon="/static/img/empty.png">
		</u-empty>
	</view>
</template>

<script>
	import upload from 'components/file-upload/upload.vue'

	export default {
		components: {
			upload
		},
		props: {
			readonly: {
				type: Boolean,
				default: false
			},
			typeid: {
				type: String,
				default: ""
			},
			bdbm: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				noShow: false,
				percent: '',
				actions: [{
					text: '附件下载',
					icon: 'down'
				}, {
					text: '附件删除',
					icon: 'delete-o'
				}, {
					text: '附件预览',
					icon: 'eye-o'
				}],
				listData: [],
				itemList: {},
				PlantFormPort: Config.PlatformAPI
			}
		},
		mounted() {

			if (this.readonly) {
				this.actions = [{
					text: '附件下载',
					icon: 'down'
				}, {
					text: '附件预览',
					icon: 'eye-o'
				}]
			}

			this.GetAttachFunc(this.bdbm, this.typeid);

			if (!this.readonly) {
				this.onCreate();
			}

		},
		methods: {
			onInput(e) {},
			onCallback(e) {
				this.GetAttachFunc(this.bdbm, this.typeid);
			},
			onOpen(item) {
				this.itemList = item;
			},
			onCreate() {

				let _typeid = this.typeid;
				let _bdbm = this.bdbm;

				this.$refs.upload.create({
					// #ifdef APP-PLUS
					cuWebview: this.$mp.page.$getAppWebview(), // app必传
					// #endif
					url: this.PlantFormPort + publicJs.Config.Attach.Upload,
					name: 'filedata', // 附件key
					size: 10, // 附件上传大小上限(M)，默认10M
					debug: true,
					//根据你接口需求自定义请求头
					header: {
						Authorization: uni.getStorageSync("token"),
					},
					//根据你接口需求自定义body参数
					formData: {
						bdbm: _bdbm,
						typeid: _typeid,
						relationattachid: ""
					}
				});

			},
			GetAttachFunc(_bdbm, _typeid) {

				this.$api.GetAttachInfo({
					bdbm: _bdbm,
					typeid: _typeid,
					pageIndex: 0,
					pageSize: 20
				}).then((res) => {
					this.listData = res;
					if (this.listData.length) {
						this.noShow = false;
					} else {
						this.noShow = true;
					}
				})

			},
			download(key, name) {
				let ApiDownload = this.PlantFormPort + "/api/Attach/PhoneDownloadFile"

				this.$api.myAjaxFunc(ApiDownload, {
					Key: key,
					Token: uni.getStorageSync("token")
				}).then((res) => {
					if (res.success) {
						let url = this.PlantFormPort + '/' + res.resultData;
						let ele = document.createElement('a')
						ele.download = name
						ele.style.display = 'none'
						ele.href = url
						document.body.appendChild(ele)
						ele.click()
						document.body.removeChild(ele)
					}
				})
			},
			deleteFile(key, _bdbm, _typeid) {
				//删除附件
				this.$api.myAjaxFunc(this.PlantFormPort + publicJs.Config.Attach.Delete, {
					AttachAllID: key
				}).then((res) => {

					this.$gl.toastSuccess("删除成功").then(res => {
						this.GetAttachFunc(_bdbm, _typeid);
					})

				})
			},
			previewFile(key, type) {
				//预览附件

				let previewSuffix =
					".pdf;.doc;.docx;.xls;.xlsx;.ppt;.pptx;.txt;.jpg;.jpeg;.gif;.png;.bmp;.tif;"

				if (previewSuffix.includes(type)) {

					this.$api.myAjaxFunc(this.PlantFormPort + publicJs.Config.Attach.AttachView, {
						Key: key
					}).then((res) => {

						let filePath = this.PlantFormPort + "/" + res.resultData;

						uni.navigateTo({
							url: "/pages/PreView?filePath=" + filePath
						});

					});
				} else {
					this.$gl.toastWarning("当前附件类型不支持预览！")
				}
			},
			onSelect(action, index) {

				let _typeid = this.typeid;
				let _bdbm = this.bdbm;
				let key = this.itemList.AttachAllID;
				let type = this.itemList.AttachType
				let name = this.itemList.AttachName

				if (action.text == "附件下载") {
					this.download(key, name)
				} else if (action.text == "附件删除") {
					this.deleteFile(key, _bdbm, _typeid)
				} else if (action.text == "附件预览") {
					this.previewFile(key, type);
				}

			}
		},
	}
</script>

<style lang="scss" scoped>
</style>
